* {
  margin: 0;
  padding: 0;
}

ul,
ol,
li {
  list-style: none;
}

body {
  cursor: url('img/pen32.ico') 0 32, auto
}

.canvas-list {
  position: relative;
}

.canvas-list #canvas1 {
  position: absolute;
  top: 0;
  left: 0;
}

.canvas-list #canvas2 {
  position: absolute;
  top: 0;
  left: 0;
}

.tools,
.tools-options {
  position: relative;
  top: 0;
  left: 0;
  /* width: 100%; */
  width: 300px;
  margin: 0 auto;
  user-select: none;
}

.tools-options {
  position: fixed;
  top: 0;
  left: 0;
  margin-top: 70px;
  width: 70px;
  /* height: 100%; */
  /* background-color: orange; */
}

.tools div {
  display: inline-block;
  margin: 15px 10px;
  width: 50px;
  height: 50px;
  transition: all .5s;
}

.tools img {
  width: 50px;
  height: 50px;
}

.tools .active {
  transform: scale(1.3);
}

/* .tools .pen {
  margin-left: 500px;
} */

.tools #clear:hover {
  transform: rotate(-45deg);
}

.tools #save {
  transform: rotate(-35deg);
}

.tools #save:hover {
  transform: rotate(4deg);
}

.tools div {
  padding-bottom: 0;
  margin-bottom: 0;
  transition: all .5s;
}

/* ---------------------------- */
.line-color {
  position: fixed;
  top: 70px;
  left: 15px;
}

li {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  margin: 20px;
  transition: all .5s;
}

.line-color li:nth-child(1) {
  background-color: #000000;
}

.line-color li:nth-child(2) {
  background-color: #093D64;
}

.line-color li:nth-child(3) {
  background-color: #FB6602;
}

.line-color li:nth-child(4) {
  background-color: #DC3972;
}

.line-color li:nth-child(5) {
  background-color: #34ADAE;
}

.line-color li:nth-child(6) {
  background-color: #FD8F52;
}

.line-color li:nth-child(7) {
  background-color: #78932C;
}

.line-color li:nth-child(8) {
  background-color: #555555;
}

.line-color .active {
  transform: scale(1.4);
}

.line-weight {
  position: fixed;
  top: 70px;
  left: 70px;
}

.line-weight li {
  display: block;
  width: 40px;
  margin: 20px 0 0 20px;
  background-color: black;
}

.line-weight li:nth-child(1) {
  height: 10px;
}

.line-weight li:nth-child(2) {
  height: 15px;
}

.line-weight li:nth-child(3) {
  height: 20px;
}

.line-weight li:nth-child(4) {
  height: 25px;
}

.line-weight .active {
  width: 60px;
}

.eraser-width {
  display: none;
}

.eraser-width li {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 0 0 30px;
}